<template>     
        <div class="tongzhi">
            <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate">
                <FormItem label="上传头像" v-if="imgStates">
                    <UpImg @uploadData="uploadData" @removeData="removeData" :currentImg="imgurls" ref="acquire"></UpImg>
                </FormItem>
                <!-- <FormItem label="学校" prop="school_id">
                    <Select v-model="formValidate.school_id" style="width:80%" clearable>
                        <Option v-for="item in schoolList" :value="item.id" :key="item.id"> {{item.school_name.zh?item.school_name.zh:item.school_name.mn}}</Option>            
                    </Select>
                </FormItem> -->
                <FormItem label="学生学号" prop="student_learncode">
                    <div @keyup.enter="handleSubmit('formValidate')">
                    <Input v-model="formValidate.student_learncode"  :maxlength='18' placeholder="学生学号" style="width:80%"></Input>
                    </div>
                </FormItem>
                <FormItem label="国籍" prop="country">
                    <Select v-model="formValidate.country" style="width:80%" clearable>
                        <Option v-for="item in listDictionary.nationality" :value="item.value_code" :key="item.value_code"> {{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>            
                    </Select>
                </FormItem>
                <FormItem label="港澳台侨" prop="hkmtb">
                    <Select v-model="formValidate.hkmtb" style="width:80%" clearable>
                        <Option :value="1" :key="1">是</Option>
                        <Option :value="0" :key="0">否</Option>
                    </Select>
                </FormItem>
                <FormItem label="姓名" prop="student_name.zh">
                    <div @keyup.enter="handleSubmit('formValidate')">
                    <Input v-model="formValidate.student_name.zh" placeholder="姓名" style="width:80%"></Input>
                    </div>
                </FormItem>      
                <FormItem label="性别" prop="sex">
                    <Select v-model="formValidate.sex" style="width:80%" clearable>
                        <Option  v-for="item in listDictionary.gender" :value="item.value_code" :key="item.value_code">{{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>            
                    </Select>
                </FormItem> 
                <FormItem label="出生日期" prop="birthday">
                    <Col span="19">
                    <DatePicker @on-change="shijianfun"  v-model="birthdaytime"  type="date"  placeholder="请选择出生日期" style="width:100%"></DatePicker>
                    </Col>
                </FormItem>  
                <FormItem label="身份证号" prop="idcard">
                    <div @keyup.enter="handleSubmit('formValidate')">
                    <Input v-model="formValidate.idcard" placeholder="身份证号" style="width:80%"></Input>
                    </div>
                </FormItem>  
                <FormItem label="籍贯" style="width:100%;" >
                    <Select v-model="formValidate.native_id" style="width:30%" @on-change="native($event,'native')" clearable>
                        <Option v-for="item in regionList" v-if="item.parent_id ==0" :value="item.id" :key="item.value">{{item.region_name.zh?item.region_name.zh:item.region_name.mn}}</Option>
                    </Select>
                    <Select v-model="formValidate.native_city_id" style="width:30%" @on-change="city($event,'native')" clearable>
                        <Option v-for="item in nativeCity" :value="item.id" :key="item.value">{{item.region_name.zh?item.region_name.zh:item.region_name.mn}}</Option>
                    </Select>
                    <Select v-model="formValidate.native_county_id" style="width:30%" clearable>
                        <Option v-for="item in nativeCounty" :value="item.id" :key="item.value">{{item.region_name.zh?item.region_name.zh:item.region_name.mn}}</Option>
                    </Select>
                </FormItem>  

                <FormItem label="出生地" style="width:100%;">
                    <Select v-model="formValidate.birth_id" style="width:30%" @on-change="native($event,'birth')" clearable>
                        <Option v-for="item in regionList" v-if="item.parent_id ==0" :value="item.id" :key="item.value">{{item.region_name.zh?item.region_name.zh:item.region_name.mn}}</Option>
                    </Select>
                    <Select v-model="formValidate.birth_city_id" style="width:30%" @on-change="city($event,'birth')" clearable>
                        <Option v-for="item in birthCity" :value="item.id" :key="item.value">{{item.region_name.zh?item.region_name.zh:item.region_name.mn}}</Option>
                    </Select>
                    <Select v-model="formValidate.birth_county_id" style="width:30%" clearable>
                        <Option v-for="item in birthCounty" :value="item.id" :key="item.value">{{item.region_name.zh?item.region_name.zh:item.region_name.mn}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="民族" prop="ehnic_id">
                    <Select v-model="formValidate.ehnic_id" style="width:80%" clearable>
                        <Option v-for="item in listDictionary.Nation" :value="item.value_code" :key="item.value_code"> {{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>            
                    </Select>
                </FormItem>
                <FormItem label="健康状况" prop="health_id">
                    <Select v-model="formValidate.health_id" style="width:80%" clearable>
                        <Option  v-for="item in listDictionary.health" :value="item.value_code" :key="item.value_code">{{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>            
                    </Select>
                </FormItem>
                <FormItem label="政治面貌" prop="political_id">
                    <Select v-model="formValidate.political_id" style="width:80%" clearable>
                        <Option v-for="item in listDictionary.politicaltype" :value="item.value_code" :key="item.value_code"> {{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>            
                    </Select>
                </FormItem>
                <FormItem label="学籍号" prop="student_number">
                    <div @keyup.enter="handleSubmit('formValidate')">
                    <Input v-model="formValidate.student_number" placeholder="学籍号" style="width:80%"></Input>
                    </div>
                </FormItem>

                <div style="width:90%;">
                <FormItem style="width:100%;">
                    <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
                </FormItem>
                </div>
                <div style="clear:both"></div>
                <Spin size="large" fix v-if="spinShow"></Spin>
            </Form> 

            <!-- 学生扩展信息组件 -->
            <!-- <student-basic-information-expand-edit :infoOId='infoOId'  v-if='expandShow==true' :typeother='typeother'></student-basic-information-expand-edit> -->
        </div>
</template>

<script>
export default {
    props: {
        infoId: {
            type: [Boolean,Number,Object,Array],
            default: false
        },
        typeother: {
            type: [Boolean,String],
            default: false
        },
        otherTreeEclassid: {
            type: [Boolean,Number],
            default: false
        },
    },
    components: {
        StudentBasicInformationExpandEdit: resolve => {require(['./StudentBasicInformationExpandEdit.vue'], resolve);},
        UpImg: resolve => {require(['&/Public/UpImg.vue'], resolve);},
    },
    
    data () {
        const validateStudentNumber = (rule, value, callback) => {
            setTimeout(() => {
                if (value && value.length<19) {
                    return callback(new Error('学籍号为19位'));
                }else{
                    callback();
                }
            }, 1000);
        };
        const validateStudentLearncode = (rule, value, callback) => {
            setTimeout(() => {
                if (!value) {
                    return callback(new Error('请输入学号'));
                }else if (value.length<18) {
                    return callback(new Error('学号为18位'));
                }else{
                    callback();
                }
            }, 1000);
        };
        return {
            infoUrl:`api/student/information/getById/${this.infoId}`,//请求单条数据
            saveUrl:'',//保存接口
            saveType:null,//保存方式

            imgStates:false,
            imgurls:null,

            spinShow:false,
            infoOId:null,//请求的数据
            listDictionary: {
                nationality:[],
                Nation:[],
                health:[],
                politicaltype:[],
                gender:[]
            },//数据字典  性别  国籍  民族  政治面貌  健康状况
            schoolList:[],//学校数据
            regionList:[],//籍贯省
            nativeCity:[],//籍贯市
            nativeCounty:[],//籍贯区
            birthCity:[],//出生地市
            birthCounty:[],//出生地区

            expandShow:false,
            birthdaytime:null,//出生日期

            formValidate: {
                student_number: null,//学籍号
                email:null,//邮箱
                idcard:null,//身份证号
                student_learncode:null,//学号,
                student_name:{//姓名
                    zh:null,
                    mn:null,
                    en:null,                   
                },
                picture:null,//图片
                sex:null,//性别
                birthday: null,//出生日期
                health_id:null,//健康状况
                ehnic_id:null,//民族
                political_id:null,//政治面貌
                country:null,//国籍
                hkmtb:0,//港澳台侨
                birth_id:null,//出生地省
                birth_city_id:null,//出生市
                birth_county_id:null,//出生县
                native_id:null,//籍贯省
                native_city_id:null,//籍贯市
                native_county_id:null,//籍贯县
            },
            ruleValidate: {
                student_number: [
                    { validator: validateStudentNumber, trigger: 'blur' }
                    
                ],
                // student_learncode: [
                //     { validator: validateStudentLearncode, trigger: 'blur' }
                    
                // ],
                idcard: [
                    {required:true,pattern:/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|[X,x])$/,message:'请输入正确的身份号',trigger:'blur'}
                ],
                country: [
                    { type:'string',required: true, message: '请选择国籍', trigger: 'change' }
                ],
                'student_name.zh': [
                    { required: true, message: '请填写姓名', trigger: 'blur' }
                ],
                sex: [
                    { type:'string',required: true, message: '请选择性别', trigger: 'change' }
                ],
                ehnic_id: [
                    { type:'string',required: true, message: '请选择民族', trigger: 'change' }
                ],
                political_id: [
                    { type:'string',required: true, message: '请选择政治面貌', trigger: 'change' }
                ],
                hkmtb: [
                    { type:'number',required: true, message: '请选择港澳台侨', trigger: 'change' }
                ],
                school_id: [
                    { type:'number',required: true, message: '请选择学校', trigger: 'change' }
                ],
                
            },
            
            headers: {
            'Authorization': 'Bearer '+((localStorage.token)?(localStorage.token):'')
            },

            regionAllData: {
                native: [],
                city: [],
                county: []
            }
        }
    },
    methods: {

        /************************************************************
         * 
         * 图片上传回调
         * 
         ************************************************************/
        uploadData(data){
            this.formValidate.picture = data.id
        },

        /************************************************************
         * 
         * 删除图片
         * 
         ************************************************************/
        removeData(data){
            this.formValidate.picture = null

        },
        
        /************************************************************
         * 
         * 点击省带市
         * 
         ************************************************************/
        native (val, obj) {
            if (obj === 'native') {
                this.nativeCity = this.regionAllData.city.filter(el => el.parent_id === val)
            } else {
                this.birthCity = this.regionAllData.city.filter(el => el.parent_id === val)
            }
        },

        /************************************************************
         * 
         * 点击市带区
         * 
         ************************************************************/
        city (val, obj) {
            if (obj === 'native') {
                this.nativeCounty = this.regionAllData.county.filter(el => el.parent_id === val)
            } else {
                this.birthCounty = this.regionAllData.county.filter(el => el.parent_id === val)
            }
        },

        /************************************************************
         * 
         * 日期转换格式
         * 
         ************************************************************/
        shijianfun(time){
            this.formValidate.birthday=time
        },

        /************************************************************
         * 
         * 提交时
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {       
                    this.spinShow=true//输入框禁用   
                    this.saveType(this.saveUrl,this.formValidate).then(val=>{
                        if(this.otherTreeEclassid && this.infoId==false){
                            let form = {
                                eclass_id: this.otherTreeEclassid,//班级id
                                user_id: val.data.id, 
                            }
                            this.$emit('backList', {
                                status: true,
                                user_id: val.data.id
                            })  
                            this.spinShow=false
                            // this.$http.post('api/student/v1/studentlearnstatus/create',form).then(val1=>{

                            //     this.$emit('backList',true,val.data.id) 
                            //     this.spinShow=false
                            //     this.$Message.success(val1.message);
                            // }).catch(err1=>{
                            //     if(err1.code && er1r.code==422) {
                            //         this.$Message.error(err1.message);
                            //     }
                            // })
                        }else{
                            this.$emit('backList', {
                                status: true,
                                user_id: val.data.id
                            }) 
                            this.spinShow=false
                            this.$Message.success(val.message);
                        }
                    }).catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShow=false
                    })  
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        
        
        /************************************************************
         * 
         * 单条数据请求
         * 
         ************************************************************/
        infoData(){
            this.spinShow=true
            this.$http.get(this.infoUrl).then(val=>{ 
                let obj = JSON.parse(JSON.stringify(val.data))
                this.infoOId = val.data.student_base_id
                this.formValidate.country =  obj.country//用于默认选的 国籍
                // this.formValidate.hkmtb =  obj.hkmtb ==null ? '' : parseInt(obj.hkmtb)//用于默认选的  港澳台侨
                // this.formValidate.health_id = obj.health_id ==null ? '' : parseInt(obj.health_id)//用于默认选的 健康状况
                // this.formValidate.political_id = obj.political_id ==null ? '' : parseInt(obj.political_id)//用于默认选的 政治面貌
                // this.formValidate.sex = obj.sex ==null ? '' : parseInt(obj.sex)//用于默认选的 性别
                // this.formValidate.ehnic_id =  obj.ehnic_id ==null ? '' : parseInt(obj.ehnic_id)//用于默认选的 民族
                // // this.formValidate.school_id =  obj.school_id ==null ? '' : parseInt(obj.school_id)//用于默认选的学校
                
                // if(obj.birth_place!==null){
                //     this.formValidate.birth_id = parseInt(obj.birth_place.id)//用于默认选出生地省
                //     this.formValidate.birth_city_id = parseInt(obj.birth_place_city.id)//用于默认选出生市
                //     this.formValidate.birth_county_id = parseInt(obj.birth_place_county.id)//用于默认选出生县
                //     this.native(this.formValidate.birth_id,'birth')
                //     this.city(this.formValidate.birth_city_id,'birth')
                // }
                // if(obj.native_place!==null){
                //     this.formValidate.native_id = parseInt(obj.native_place.id)//用于默认选籍贯省
                //     this.formValidate.native_city_id = parseInt(obj.native_place_city.id)//用于默认选籍贯市
                //     this.formValidate.native_county_id = parseInt(obj.native_place_county.id)//用于默认选籍贯县
                //     this.native(this.formValidate.native_id,'native')
                //     this.city(this.formValidate.native_city_id,'native')
                // }
                
                this.formValidate.student_name.zh = obj.student_name.zh// 姓名
                this.formValidate.student_number = obj.student_number// 学籍号
                this.formValidate.idcard = obj.idcard// 身份证号
                this.formValidate.student_learncode = obj.student_learncode//学号
                this.birthdaytime = obj.birthday//出生日期

                this.imgurls = obj.picture
                this.imgStates = true

                this.shijianfun(obj.birthday)
                this.expandShow=true
                
                this.spinShow=false
                // this.$emit('backList',true)
            })
            .catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },

        /************************************************************
         * 
         * 学校获取数据
         * 
         ************************************************************/
        schoolListFun(){
            this.spinShow=true
            this.$http.get('api/base/v1/get/school/list').then((response) => {
                this.schoolList=response.data
                this.spinShow=false
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },
      
        /************************************************************
         * 
         * 地区
         * 
         ************************************************************/ 
        regionListFun () {
            let that = this
            that.$http.get('api/base/regions/get/noPageList').then(val=>{
                let arr = val.data
                let arr1 = arr.filter(el => el.level === 0)
                let arr2 = arr.filter(el => el.level === 1)
                let arr3 = arr.filter(el => el.level === 2)
                that.regionList = arr1
                that.regionAllData.native = arr1
                that.regionAllData.city = arr2
                that.regionAllData.county = arr3
            }).catch(err=>{
            })
        },

        /************************************************************
         * 
         * 数据字典获取数据
         * 
         ************************************************************/
        listDictionaryFun(){
            this.nationalityData ()
            this.nationData ()
            this.genderData ()
            this.healthData ()
            this.politicaltypeData ()
        },

        // 国籍
        nationalityData () {
            let that = this
            let url = 'api/base/dictionary/get/bycode/nationality'
            this.$http.get(url).then((res) => {
                that.listDictionary.nationality = res.data
            }).catch(err=>{
                
            })
        },

        // 民族
        nationData () {
            let url = 'api/base/dictionary/get/bycode/nation'
            let that = this
            this.$http.get(url).then((res) => {
                that.listDictionary.Nation = res.data
            }).catch(err=>{
                
            })
        },

        // 性别
        genderData () {
            let url = 'api/base/dictionary/get/bycode/gender'
            let that = this
            this.$http.get(url).then((res) => {
                that.listDictionary.gender = res.data
            }).catch(err=>{
                
            })
        },

        // 政治面貌
        politicaltypeData () {
            let url = 'api/base/dictionary/get/bycode/politicaltype'
            let that = this
            this.$http.get(url).then((res) => {
                that.listDictionary.politicaltype = res.data
            }).catch(err=>{
                
            })
        },

        // 健康状态
        healthData () {
            let url = 'api/base/dictionary/get/bycode/health'
            let that = this
            this.$http.get(url).then((res) => {
                that.listDictionary.health = res.data
            }).catch(err=>{
                
            })
        },
    }, 
    created() {
        this.listDictionaryFun()
        // this.schoolListFun()
        this.regionListFun()
        if(this.infoId==false){
            // add
            this.spinShow=true
            this.imgStates = true
            this.saveUrl='api/student/information/save'
            this.saveType=this.$http.post

        }else{
            // edit
            this.formValidate.id = this.infoId
            this.infoData();
            this.saveUrl=`api/student/information/update`
            this.saveType=this.$http.put
        }
        this.spinShow=false
 
    },
    watch:{
        infoId: {
            handler (val) {
                if(this.infoId==false){
                    // add
                    this.saveUrl='api/student/information/save'
                    this.saveType=this.$http.post

                }else{
                    // edit
                    this.formValidate.id = this.infoId
                    this.saveUrl=`api/student/information/update`
                    this.saveType=this.$http.put
                    this.infoUrl=`api/student/information/getById/${this.infoId}`
                    this.infoData()
                }
            }
        },
    },

}
</script>

<style lang="less">
    .ivu-form-item{
        width:50%;
        float:left;
    }
</style>